<template>
  <svg
    v-if="type === '1:1'"
    xmlns="http://www.w3.org/2000/svg"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.5 0.5H0.5V11.5H11.5V0.5ZM0.5 0C0.223858 0 0 0.223858 0 0.5V11.5C0 11.7761 0.223858 12 0.5 12H11.5C11.7761 12 12 11.7761 12 11.5V0.5C12 0.223858 11.7761 0 11.5 0H0.5Z"
      :stroke="color"
    />
  </svg>
  <svg
    v-if="type === '1:2'"
    xmlns="http://www.w3.org/2000/svg"
    class="size-icon"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8.5 0.5H3.5L3.5 11.5H8.5V0.5ZM3.5 0C3.22386 0 3 0.223858 3 0.5V11.5C3 11.7761 3.22386 12 3.5 12H8.5C8.77614 12 9 11.7761 9 11.5V0.5C9 0.223858 8.77614 0 8.5 0H3.5Z"
      :stroke="color"
    />
  </svg>
  <svg
    v-if="type === '2:1'"
    xmlns="http://www.w3.org/2000/svg"
    class="size-icon"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.5 3.5H0.5V8.5H11.5V3.5ZM0.5 3C0.223858 3 0 3.22386 0 3.5V8.5C0 8.77614 0.223858 9 0.5 9H11.5C11.7761 9 12 8.77614 12 8.5V3.5C12 3.22386 11.7761 3 11.5 3H0.5Z"
      :stroke="color"
    />
  </svg>
  <svg
    v-if="type === '3:4'"
    xmlns="http://www.w3.org/2000/svg"
    class="size-icon"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M10 0.5H2V11.5H10V0.5ZM2 0C1.72386 0 1.5 0.223858 1.5 0.5V11.5C1.5 11.7761 1.72386 12 2 12H10C10.2761 12 10.5 11.7761 10.5 11.5V0.5C10.5 0.223858 10.2761 0 10 0H2Z"
      :stroke="color"
    />
  </svg>
  <svg
    v-if="type === '4:3'"
    xmlns="http://www.w3.org/2000/svg"
    class="size-icon"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.5 2H0.5V10H11.5V2ZM0.5 1.5C0.223858 1.5 0 1.72386 0 2V10C0 10.2761 0.223858 10.5 0.5 10.5H11.5C11.7761 10.5 12 10.2761 12 10V2C12 1.72386 11.7761 1.5 11.5 1.5H0.5Z"
      :stroke="color"
    />
  </svg>
  <svg
    v-if="type === '9:16'"
    xmlns="http://www.w3.org/2000/svg"
    class="size-icon"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M9 0.5H3V11.5H9V0.5ZM3 0C2.72386 0 2.5 0.223858 2.5 0.5V11.5C2.5 11.7761 2.72386 12 3 12H9C9.27614 12 9.5 11.7761 9.5 11.5V0.5C9.5 0.223858 9.27614 0 9 0H3Z"
      :stroke="color"
    />
  </svg>
  <svg
    v-if="type === '16:9'"
    xmlns="http://www.w3.org/2000/svg"
    class="size-icon"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    :stroke="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.5 3H0.5V9H11.5V3ZM0.5 2.5C0.223858 2.5 0 2.72386 0 3V9C0 9.27614 0.223858 9.5 0.5 9.5H11.5C11.7761 9.5 12 9.27614 12 9V3C12 2.72386 11.7761 2.5 11.5 2.5H0.5Z"
      :stroke="color"
    />
  </svg>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props: ['type', 'color'],
})
</script>
<style lang="less">
.size-icon {
  width: 12px;
  height: 12px;
}
</style>
